<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/kendocommon.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>卡挂失</title>
    <meta charset="utf-8">
    <link href="${basepath}/css/viewcss/main/workschedule/scheduleform.css" rel="stylesheet" type="text/css"/>
    <style>
    	table{font-size:12px}
    	.btndiv{
    		margin-top:20px;
			text-align:center;
		}
		.btn{
			display: inline-block; 
			width: 80px;
			height: 40px;
			border-radius:4px;
			border: 1px solid #CCC;
			background: #F5F5F5;
			padding-top: 10px;
		}
		.querybtn{
			text-align:center;
			display: inline-block; 
			width: 60px;
			height: 18px;
			border-radius:4px;
			border: 1px solid #CCC;
			background: #F5F5F5;
			padding-top: 4px;
		}
    </style>
    <script>
    var selectItem=new Object();
        $(document).ready(function() {
        	
        	$(".various").fancybox({
        		title       : "操作历史",
        		maxWidth	: 1000,
        		maxHeight	: 700,
        		fitToView	: false,
        		width		: '70%',
        		height		: '50%',
        		autoSize	: false,
        		closeClick	: false,
        		openEffect	: 'none',
        		closeEffect	: 'none'
        	});
        	        
        	$("#toolbar").kendoToolBar({
	            resizable: false,
	            items: [
	            	{ type: "separator" },
	                { template: '<label>手机号:</label><input id="queryphone" class="k-textbox"/>'},
	                { template: '<label>乐园:</label><input id="kids_park"/>'},
	                { template: '<label>会员卡是否有效:</label><input id="member_isvaild"/>'},
	                { type: "separator" },
	                { type: "button", text: "查询",click: queryCustomerList },
	            ]
	        });
        	
            dataSource = new kendo.data.DataSource({
                transport: {
                    read:  {
                        url: "${path}/cardOPerator/queryCardOperator",
                        dataType: "json",
                        data: function() {
					        return {
					         	phone:$("#queryphone").val(),
					      		kids_parkId:$("#kids_park").val(),
					      		member_isvaild:$("#member_isvaild").val()
					        };
					    }
                    }
                },
                serverPaging: true,
                serverFiltering: true,
                pageSize: 15,
                schema: {
                	data:"data",
               		total:"total"
                }
            });
            
            $("#grid").kendoGrid({
                dataSource: dataSource,
                //pageable: true,
                pageable: {
					refresh: true,
					pageSizes: true,
					buttonCount: 5,
					page: 1,
					pageSize: 10,
					pageSizes: [10, 20, 30],
					messages: {
						display: "显示 {0}-{1} 共 {2} 项",
						empty: "没有数据",
						itemsPerPage: "每面显示数量",
						first: "第一页",
						last: "最后一页",
						next: "下一页",
						previous: "上一页"
					}
				},
                selectable: "multiple row",
                allowCopy: true,
                columns: [
                    { command: [{name:"editrow",text:"<span class='k-icon k-edit'></span>编辑",click:cardOperator,buttonType:"ImageAndText"}], title: "操作", width: "100px" },
                	{ field:"username", title: "用户名",width: "150px",template:careLogTemp},
                    { field:"phone", title: "手机号",width: "120px"},
                    { field:"member_number", title: "会员号",width: "150px"},
                    { field:"member_type", title: "卡类型",width: "100px",template:memberTypeTemp},
                    { field:"member_isvaild", title: "卡状态",width: "80px",template:cardTemp},
                    //{ field:"card_number", title: "卡号",width: "150px"},
                    { field:"card_out_number", title: "卡外码",width: "150px"},
                    { field:"first_recharge_time", title: "首次充值时间",width: "120px"},
                    { field:"first_member_time", title: "入会时间",width: "120px"}
                    //{ field: "UnitsInStock", title:"Units In Stock", width:"120px"},//,format:"{0:yyyy/MM/dd}"
                    ]
            });
            
            $('#grid').css("height",document.body.clientHeight-40);
            //$("#isMember").kendoComboBox();
            
            var kids_park = new kendo.data.DataSource({
      			transport: {
      			  read: {
      			  //url: spera.spera_consume
        		  url: "${path}/cardOPerator/getKidsList",
         		  dataType: "json"				
       				 }
     			 }
    		});
            
            //乐园下拉
    		$("#kids_park").kendoComboBox({
    	     	dataValueField: "kids_park_id",
    	        dataTextField: "name",
    	        dataSource: kids_park,
    	        select: function(e) {
    	        	//debugger;
    				var value = this.value();
    				var item = e.item;  							      					    
    				selectItem=e.sender.dataItem(item);
    				//console.log(selectItem);
    			}
    		});
            
    		
    		

    		$("#member_isvaild").kendoComboBox({
    	     	dataValueField: "value",
    	        dataTextField: "text",
    	        dataSource: [{'text':'有效','value':'1'},
    	                     {'text':'无效','value':'0'}]
    		});
            
		});
        
      
        
        var careLogTemp = function(dataItem){
			return "<a href='${path}/cardOPerator/cardOperatorLog?id="+dataItem.c_user_id+"' style='color:#000' class='various' data-fancybox-type='iframe'>" + dataItem.username + "</a>";
		}
        
        var cardTemp = function(dataItem){
        	var status = "";
			switch(dataItem.member_isvaild)
			{
				case 0:status="注销/挂失";break;
				case 1:status="激活";break;
			}
			return status;
        }
        
        var memberTypeTemp = function(dataItem){
        	var status = "";
			switch(dataItem.member_type)
			{
				case 0:status="注册用户";break;
				case 1:status="充值用户";break;
				case 2:status="会员卡用户";break;
			}
			return status;
        }
        
		var cardOperator = function(e){//任务分配
			var grid = $("#grid").data("kendoGrid");
			e.preventDefault();
            var data = grid.dataItem($(e.currentTarget).closest("tr"));
            clearForm();
            setForm(data);
            showInfo();
		}
		
		var layIndex;
		var showInfo = function(){
			layIndex = layer.open({
				title:"卡操作",
				type: 1,
				fix: false,
		        //shadeClose: true,
		        maxmin: true,
				area: ['650px', '400px'], //宽高
			    content: $('#inlineForm'),
			    cancel: function(index){
			    	//$("#grid").data("kendoGrid").dataSource.fetch();
		        }
			});
		}
        
        var clearForm = function(){
			$('#c_user_id').val('');
			$('#c_family_id').val('');
			$('#username').val('');
			$('#phone').val('');
			$('#member_number').val('');
			$('#operator_isvalid').val('');
			$('#card_number').val('');
			$('#card_out_number').val('');
			$('#notes').val('');
		}
		
		var setForm = function(data){
			$('#c_user_id').val(data.c_user_id);
			$('#c_family_id').val(data.c_family_id);
			$('#username').val(data.username);
			$('#phone').val(data.phone);
			$('#member_number').val(data.member_number);
			$('#operator_isvalid').val(data.member_isvaild);
			$('#card_number').val(data.card_number);
			$('#card_out_number').val(data.card_out_number);
		}
		
		var queryCustomerList = function(e){//查询
			var grid = $("#grid").data("kendoGrid");
			var checkedIDs = new Array();
			$.each(grid.items(), function (i, item) {
				var cbxController = $(item).find(".gridchk");
				var isChecked = cbxController.is(":checked");
				var curData = grid.dataItem(item);
				if (isChecked){
					checkedIDs.push(curData.phone);
				}
			});
			
			$("#grid").data("kendoGrid").dataSource.fetch();
			$("#grid").data("kendoGrid").dataSource.page(1);
		}
		
		var saveCardOperator = function(e){
			var formval = JsonCode(cardForm);
			formval = JSON.parse(formval);
			$.ajax({
		        url: "${path}/cardOPerator/saveCardOperator",
		        dataType: 'json',
   				contentType: "application/json",
		        data: JSON.stringify(formval),
		        type:"POST", 
		        success: function (text) {
		        	layer.msg(text.msg, {time: 3000, icon:6});
		        	if(text.status==1){
		        		layer.close(layIndex);
		        		$("#grid").data("kendoGrid").dataSource.fetch();
		        	}
		        },
		        error: function (jqXHR, textStatus, errorThrown) {
		        	layer.msg("与远程服务器交互异常，请规范操作或重新登录", {time: 3000, icon:6});
		        }
		    });
		}
		
    </script>
</head>
<body>
	<div id="toolbar" style="margin:2px"></div>
    <div id="grid" style="margin:2px;font-size:10px"></div>
    
    
    <div id="inlineForm" style="display:none;padding:30px">
		<form class="bootstrap-frm" action="" method="post" id="cardForm" name="cardForm">
			<input type="hidden" name="c_user_id" id="c_user_id" >
			<input type="hidden" name="c_family_id" id="c_family_id" >
			<table>
				<tr>
                    <td style="padding:5px">
                        <label style="font-size:14px;">用户名</label>
                    </td>
                    <td style="padding:5px">
                    	<input type="text" placeholder="用户名" name="username" id="username" readonly="readonly" style="width:200px">
                    </td>
                    <td style="padding:5px">
                        <label style="font-size:14px;">手机号</label>
                    </td>
                    <td style="padding:5px">
                    	<input type="text" placeholder="手机号" name="phone" id="phone" readonly="readonly" style="width:200px">
                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                        <label style="font-size:14px;">会员号</label>
                    </td>
                    <td style="padding:5px">
                    	<input type="text" placeholder="会员号" name="member_number" id="member_number" readonly="readonly" style="width:200px">
                    </td>
                    <td style="padding:5px">
                        <label style="font-size:14px;color:red">操作</label>
                    </td>
                    <td style="padding:5px">
                    	<select name="operator_isvalid" id="operator_isvalid" style="width:200px">
                    		<option value=''>请选择</option>
                    		<option value='0'>注销/挂失</option>
                    		<option value='1'>激活</option>
                    		<option value='2'>换卡</option>
                    	</select>
                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                        <label style="font-size:14px;">卡号</label>
                    </td>
                    <td style="padding:5px">
                    	<input type="text" placeholder="卡号" name="card_number" id="card_number" readonly="readonly" style="width:200px">
                    </td>
                    <td style="padding:5px">
                        <label style="font-size:14px;">卡外码</label>
                    </td>
                    <td style="padding:5px">
                    	<input type="text" placeholder="卡外码" name="card_out_number" id="card_out_number" readonly="readonly" style="width:200px">
                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                        <label style="font-size:14px;color:red">备注</label>
                    </td>
                    <td colspan="3" style="padding:5px">
                        <textarea name="notes" id="notes" style="width:470px;height:80px"></textarea>
                    </td>
                </tr>
            </table>
            <div class="btndiv"><a href="#" onclick="saveCardOperator()" class="btn">确定</a></div>
        </form>
	</div>
</body>
</html>
